<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 630px;
            height: 550px;
            border: 3px solid red;
            box-sizing: border-box;
            padding: 10px;
            overflow: auto;
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .msg-box {
            width: 600px;
            height: 400px;
            border: 3px solid blue;
            box-sizing: border-box;
            padding: 10px;
            overflow: auto;
        }

        .send-info-box {
            display: flex;
            flex-direction: column;
            width: 600px;
            height: 100px;
            border: 2px solid #aaa;
            box-sizing: border-box;
            margin-top: 10px;
        }

        .xiaoming {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
        }

        .xiaoming input {
            flex: 1;
        } 
        .xiaoming button {
            width: 100px;
        } 

        .xiaohong {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
        }
        .xiaohong input {
            flex: 1;
        } 
        .xiaohong button {
            width: 100px;
        } 

        .xm-msg {
            text-align: left;
            color: blue
        }

        .xh-msg {
            text-align: right;
            color: pink
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box">
            <div class="msg-box" id="pagecontrol">
          
            </div>

            <div class="send-info-box">
            <xm-component></xm-component>
            <xh-component></xh-component>
            </div>
        
    </div> 

   <script src="./vue.js"></script>
   <script>
       let myApp = new Vue({
           el:'#app',
           components: {
               xmComponent:{
                template: `
                    <div class="xiaoming">
                       <input type="text">
                       <button id="xm-btn" type="">小明说</button>
                    </div>
                `
               },
               xhComponent:{
                   template:`
                    <div class="xiaohong">
                        <input type="text">
                        <button id="xh-btn" type="">小红说</button>
                    </div>
                           `
               }
           }
       })
   </script>
  
</body>
</html>